{% extends 'admin_dashboard.html' %}
{% block title %}存款业务查询与管理{% endblock %}

{% block content %}

<!-- 顶部标题 -->
<div class="d-flex align-items-center mb-4" style="font-size: 20px; font-weight: bold; color: #333;">
  <i class="bi bi-clipboard-data-fill" style="font-size: 26px; color: #3f51b5; margin-right: 10px;"></i>
  存款业务管理
</div>

<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">

  <!-- 查询表单 -->
  <div class="card p-4 mb-4">
    <h5 class="fw-bold mb-3">🔍 查询存款业务</h5>

    {% if error %}
      <div class="alert alert-warning">{{ error }}</div>
    {% endif %}

    <form method="get" class="row gy-2 gx-3 align-items-center">
      <div class="col-md-3">
        <label class="form-label">查询模式</label>
        <select name="mode" id="mode" class="form-select" onchange="onModeChange()">
          <option value="">-- 请选择 --</option>
          <option value="exact" {% if mode == 'exact' %}selected{% endif %}>精确查询</option>
          <option value="fuzzy" {% if mode == 'fuzzy' %}selected{% endif %}>模糊查询</option>
          <option value="range" {% if mode == 'range' %}selected{% endif %}>范围查询</option>
        </select>
      </div>

      <div class="col-md-3">
        <label class="form-label">字段</label>
        <select name="field" id="field" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="savingID">存款编号</option>
          <option value="savingName">存款名称</option>
          <option value="descrip">存款描述</option>
          <option value="cardID">银行卡号</option>
          <option value="curID">币种</option>
          <option value="balance">当前余额</option>
          <option value="openDate">开卡日期</option>
          <option value="IsReportLoss">是否挂失</option>
          <option value="tradeID">交易编号</option>
          <option value="tradeMoney">交易金额</option>
          <option value="tradeDate">交易日期</option>
          <option value="remark">备注</option>
          <option value="customerID">客户编号</option>
          <option value="customerName">客户姓名</option>
        </select>
      </div>

      <div class="col-sm-4" id="value-container" style="display: none;">
        <label class="form-label">查询值</label>
        <input type="text" id="input-value" name="value" class="form-control" placeholder="请输入查询值" value="{{ value }}">
      </div>

      <div class="col-sm-4" id="range-container" style="display: none;">
        <label class="form-label">上限 / 下限</label>
        <div class="d-flex gap-2">
          <input type="text" name="low" class="form-control" placeholder="上限" value="{{ low }}">
          <input type="text" name="high" class="form-control" placeholder="下限" value="{{ high }}">
        </div>
      </div>

      <div class="col-12 mt-3 d-flex justify-content-start gap-3">
        <button type="submit" class="btn btn-gray">查询</button>
        <a href="{{ url_for('deposits') }}" class="btn btn-secondary">重置</a>
        <a href="{{ url_for('add_deposit') }}" class="btn btn-gray">➕ 添加业务</a>
        <a href="{{ url_for('export_deposits') }}" class="btn btn-gray">导出 CSV</a>
      </div>

    </form>
  </div>

  <!-- 数据与操作区 -->
  <div class="card p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="fw-bold mb-0">📄 存款业务列表</h5>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered align-middle table-hover text-center">
        <thead class="table-light">
          <tr>
            <th>存款编号</th>
            <th>存款名称</th>
            <th>存款描述</th>
            <th>银行卡号</th>
            <th>币种</th>
            <th>当前余额</th>
            <th>开卡日期</th>
            <th>是否挂失</th>
            <th>交易编号</th>
            <th>交易金额</th>
            <th>交易日期</th>
            <th>备注</th>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for d in deposits %}
          <tr>
            <td>{{ d.savingID }}</td>
            <td>{{ d.savingName }}</td>
            <td>{{ d.descrip }}</td>
            <td>{{ d.cardID }}</td>
            <td>{{ d.curID }}</td>
            <td>{{ d.balance }}</td>
            <td>{{ d.openDate }}</td>
            <td>{{ d.IsReportLoss }}</td>
            <td>{{ d.tradeID }}</td>
            <td>{{ d.tradeMoney }}</td>
            <td>{{ d.tradeDate }}</td>
            <td>{{ d.remark }}</td>
            <td>{{ d.customerID }}</td>
            <td>{{ d.customerName }}</td>
            <td>
              <a href="{{ url_for('edit_deposit', savingID=d.savingID) }}" class="btn btn-sm btn-outline-primary me-2">编辑</a>
              <a href="{{ url_for('delete_deposit', savingID=d.savingID) }}" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定删除该业务吗？')">删除</a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="14" class="text-muted">暂无数据</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
  const exactFields = ['cardID', 'savingID' , 'savingName', 'curID' , 'balance' , 'openDate' , 'tradeID' , 'tradeMoney' , 'tradeDate' , 'IsReportLoss' , 'customerID' , 'customerName' , 'PID', 'telephone'];
  const fuzzyFields = ['cardID', 'savingID' , 'descrip' , 'savingName', 'curID' , 'openDate' , 'tradeID' , 'tradeMoney' , 'tradeDate' , 'remark' , 'customerID' , 'customerName' , 'PID', 'telephone'];
  const rangeFields = ['cardID', 'savingID' , 'balance' , 'openDate' , 'tradeID' , 'tradeMoney' , 'tradeDate' , 'customerID' , 'PID', 'telephone'];
  const alwaysDisabled = ['pass'];

  function onModeChange() {
    const mode = document.getElementById('mode').value;
    const valueBox = document.getElementById('value-container');
    const rangeBox = document.getElementById('range-container');
    const fieldSelect = document.getElementById('field');

    valueBox.style.display = (mode === 'exact' || mode === 'fuzzy') ? 'block' : 'none';
    rangeBox.style.display = (mode === 'range') ? 'block' : 'none';

    const options = fieldSelect.options;
    const enabledFields = mode === 'exact' ? exactFields :
                          mode === 'fuzzy' ? fuzzyFields :
                          mode === 'range' ? rangeFields : [];

    for (let i = 0; i < options.length; i++) {
      const opt = options[i];
      const val = opt.value;
      opt.disabled = val !== '' && (alwaysDisabled.includes(val) || !enabledFields.includes(val));
    }
  }

  document.addEventListener('DOMContentLoaded', onModeChange);
</script>

{% endblock %}
